<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js大图淡出淡现图片切换代码</title>

		<style>
			* {
				padding: 0px;
				margin: 0px;
			}

			#flash {
				width: 1200px;
				height: 535px;
				margin: 50px auto;
				position: relative;
			}

			#flash #play {
				width: 1200px;
				height: 535px;
				list-style: none;
				position: absolute;
				top: 0px;
				left: 0px;
			}

			#flash #play li {
				display: none;
				position: absolute;
				top: 0px;
				left: 0px;
			}

			#flash #play li img {
				float: left;
			}

			#button {
				position: absolute;
				bottom: 20px;
				left: 470px;
				list-style: none;
			}

			#button li {
				margin-left: 10px;
				float: left;
			}

			#button li div {
				width: 12px;
				height: 12px;
				background: #DDDDDD;
				border-radius: 6px;
				cursor: pointer;
			}

			#prev {
				width: 40px;
				height: 63px;
				background: url(images/beijing.png) 0px 0px;
				position: absolute;
				top: 205px;
				left: 10px;
				z-index: 1000;
			}

			#next {
				width: 40px;
				height: 63px;
				background: url(images/beijing.png) -40px 0px;
				position: absolute;
				top: 205px;
				right: 10px;
				z-index: 1000;
			}

			#prev:hover {
				background: url(images/beijing.png) 0px -62px;
			}

			#next:hover {
				background: url(images/beijing.png) -40px -62px;
			}
		</style>

		<script>
			window.onload = function() {
				var oPlay = document.getElementById('play');
				//所有图片容器
				var aLi = oPlay.getElementsByTagName('li');

				//所有button容器组
				var oButton = document.getElementById('button');
				var aDiv = oButton.getElementsByTagName('div');

				//前进后退切换
				var oPrev = document.getElementById('prev');
				var oNext = document.getElementById('next');

				//悬停所有图片
				var oFlash = document.getElementById('flash');

				//是否停止切换
				var timer2 = null;
				oFlash.onmouseover = function() {
					clearInterval(timer2);
				}
				oFlash.onmouseout = function() {
					timer2 = setInterval(oNext.onclick, 4000);
				}

				//当前选中下标的按钮
				var now = 0;
				for (var i = 0; i < aDiv.length; i++) {
					aDiv[i].index = i;
					aDiv[i].onmouseover = function() {
						if (now == this.index) return;
						now = this.index;
						tab();
					}
				}
				//向前切换事件
				oPrev.onclick = function() {
					now--;
					if (now == -1) {
						now = aDiv.length - 1;
					}
					tab();
				}
				//向后切换事件
				oNext.onclick = function() {
					now++;
					if (now == aDiv.length) {
						now = 0;
					}
					tab();
				}

				timer2 = setInterval(oNext.onclick, 5000);

				//核心切换方法
				function tab() {
					for (var i = 0; i < aLi.length; i++) {
						aLi[i].style.display = 'none';
					}
					for (var i = 0; i < aDiv.length; i++) {
						aDiv[i].style.background = "#DDDDDD";
					}
					aDiv[now].style.background = '#A10000';
					aLi[now].style.display = 'block';
					aLi[now].style.opacity = 0;
					aLi[now].style.filter = "alpha(opacity=0)";
					jianbian(aLi[now]);
				}

				function jianbian(obj) {
					var alpha = 0;
					clearInterval(timer);
					var timer = setInterval(function() {
						alpha++;
						obj.style.opacity = alpha / 100;
						obj.style.filter = "alpha(opacity=" + alpha + ")";
						if (alpha == 100) {
							clearInterval(timer);
						}
					}, 10);
				}
			}
		</script>

	</head>
	<body>

		<div id="flash">
			<div id="prev"></div>
			<div id="next"></div>
			<ul id="play">
				<li style="display: block;"><img src="images/1.jpg" alt="" /></li>
				<li><img src="images/2.jpg" alt="" /></li>
				<li><img src="images/3.jpg" alt="" /></li>
				<li><img src="images/4.jpg" alt="" /></li>
				<li><img src="images/5.jpg" alt="" /></li>
				<li><img src="images/6.jpg" alt="" /></li>
				<li><img src="images/7.jpg" alt="" /></li>
				<li><img src="images/8.jpg" alt="" /></li>
			</ul>
			<ul id="button">
				<li>
					<div style="background: #A10000;"></div>
				</li>
				<li>
					<div></div>
				</li>
				<li>
					<div></div>
				</li>
				<li>
					<div></div>
				</li>
				<li>
					<div></div>
				</li>
				<li>
					<div></div>
				</li>
				<li>
					<div></div>
				</li>
				<li>
					<div></div>
				</li>
			</ul>
		</div>
		<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div>
	</body>
</html>
